{% extends 'overview/base.html' %}

{% block external %}
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/users/settings/common.css' %}"/>
  {% block settings %}
  {% endblock %}
{% endblock %}

{% block main %}
  <div class="container">
    <div class="row settings-header">
      <div class="col-sm-4">
        <div class="media" style="padding: 10px; margin-top: 100px;">
          <div class="media-left">
            {% if user.image %}
              <img src="{{ user.image.url }}" alt="头像" class="img-circle" style="height: 50px; width: 50px;"/>
            {% else %}
              <img src="{% static 'images/users/settings/sample.jpg'%}" alt="头像" class="img-circle" style="height: 50px; width: 50px;"/>
            {% endif %}
          </div>
          <div class="media-body">
            <h4 class="media-heading" style="color: white;">{{ user.username }}</h4>
            <p class="small" style="color: lightgrey">{{ user.email }}</p>
          </div>
        </div>
      </div>
    </div>
    <!--用户配置导航栏-->
    <div class="row settings-status-bar">
      <div class="col-sm-12">
        <ul class="nav nav-pills">
          <li><a href="{% url 'users:base-information' request.user.id %}"><span class="glyphicon glyphicon-home"></span> 基本信息</a></li>
          <li><a href="{% url 'users:username' request.user.id %}"><span class="glyphicon glyphicon-user"></span> 昵称修改</a></li>
          <li><a href="{% url 'users:head-portrait' request.user.id %}"><span class="glyphicon glyphicon-picture"></span> 头像修改</a></li>
          <li><a href="{% url 'users:safety' request.user.id %}"><span class="glyphicon glyphicon-lock"></span> 账户安全</a></li>
        </ul>
      </div>
    </div>
    <!--可变部分-->
    {% block edit %}
    {% endblock %}
  </div>
{% endblock %}